<template>
  <div class="user-edit-container">
    <!-- 头部标题 -->
    <div class="page-header">
      <h2 class="page-title">详情</h2>
      <div class="divider"></div>
    </div>
    
    <!-- 编辑表单 -->
    <el-form :model="dataForm" label-width="120px" class="edit-form">

      $EDITFORMITEM$

      


      
      <!-- 表单操作按钮 -->
      <el-form-item class="action-buttons">
        <el-button 
          type="primary" 
          plain 
          class="edit-btn"
          @click="handleEdit"
        >
        {{ isEditMode ? '取消' : '编辑' }}
        </el-button>
        <el-button 
          type="primary" 
          class="save-btn"
          @click="handleSave"
          v-show="isEditMode"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "$TABLENAME$-detail"
});
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router"
import { getObj,updateObj } from "@/api/$TABLENAME$"
const router = useRouter()

const isEditMode = ref(false) // 编辑模式状态

// 用户信息表单数据
const dataForm = reactive({
  $FORMATTRIBUTE$
})




// 编辑按钮处理
const handleEdit = () => {
  // 模拟编辑模式下的逻辑
  isEditMode.value = !isEditMode.value;

  ElMessage.info(isEditMode.value?'进入编辑模式':'退出编辑模式')
}

// 保存按钮处理
const handleSave = async () => {
  // 模拟保存操作
  var _data = dataForm;
  console.log(_data);
  var res = await updateObj(_data);
  if(res.code === 20000) {
    ElMessage.success('信息保存成功')
    isEditMode.value = false; // 退出编辑模式
    getData();
  } else {
    ElMessage.error(res.msg || '保存失败')
  } 
  console.log('保存的数据:', JSON.parse(JSON.stringify(dataForm)))

}

// 页面加载时获取用户数据
onMounted(() => {
  // 模拟API获取数据
  getData();
})
const getData = async () => {
  const _id = router.currentRoute.value.query.$PRIMARYKEY$;
  var _params = {
    $PRIMARYKEY$: _id
  }
  var res = await getObj(_params);
  if(res.code === 20000) {
    Object.assign(dataForm, res.data);
  } else {
    ElMessage.error(res.msg || '获取信息失败')
  }   
}
</script>

<style lang="scss" scoped>
.user-edit-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 30px;
  
  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
  }
  
  .divider {
    height: 1px;
    background: linear-gradient(to right, #409EFF, #fff);
    margin-bottom: 20px;
  }
}

.edit-form {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
  
  .form-item {
    margin-bottom: 25px;
    
    :deep(.el-form-item__label) {
      font-size: 15px;
      font-weight: 500;
      color: #606266;
      padding-right: 15px;
    }
  }
  
  .el-input {
    height: 40px;
    line-height: 40px;
    
    :deep(.el-input__inner) {
      height: 40px;
      line-height: 40px;
      border-radius: 4px;
    }
  }
}

.avatar-uploader {
  display: flex;
  align-items: center;
  
  .avatar-preview {
    margin-right: 20px;
    background-color: #f5f7fa;
    border: 1px dashed #dcdfe6;
  }
  
  .el-button {
    padding: 8px 15px;
  }
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  
  .edit-btn, .save-btn {
    width: 120px;
    height: 40px;
    font-size: 15px;
    border-radius: 4px;
    margin: 0 10px;
  }
  
  .edit-btn {
    background-color: #fff;
    border-color: #409EFF;
    color: #409EFF;
    
    &:hover {
      background-color: #ecf5ff;
      border-color: #66b1ff;
      color: #66b1ff;
    }
  }
  
  .save-btn {
    background-color: #409EFF;
    border-color: #409EFF;
    
    &:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
}
</style>